<template>
    <div class="user_agency">
        <wrapper-content pageTitle="代理列表">
            <div class="data-content">
                <div class="table-edit">
                    <div class="left-actions">
                        <Button permission="User_User.addUser" type="primary" shape="circle" icon="plus" @click="addMember">
                            新增代理
                        </Button>
                    </div>
                    <div>
                        <!--排列-->
                        <span>排列</span>
                        <Select v-model="order1" style="width:140px">
                            <Option v-for="item in orderList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                        <Select v-model="order2" style="width:140px">
                            <Option v-for="item in orderList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>

                        <!--用户名-->
                        <span>搜索</span>
                        <Input v-model="keyword" placeholder="搜索" style="width:140px"/>
                        <Button type="info">查询</Button>
                    </div>
                </div>
                <Table :loading="loading" border :columns="columns" :data="user_list" class="no-border-table"
                       @on-selection-change="selectItem"></Table>
                <Page v-if="userCount > 0" :total="userCount" :current="page_num" @on-change="changePage"
                      @on-page-size-change="changePageSize" size="small" show-total show-sizer class="table-page">
                    <slot class="total">共 {{ userCount }} 条</slot>
                </Page>
                <!--说明-->
                <div class="cred">
                    <p>说明：</p>
                    <p><span class="fwbold">锁定/解锁:</span>设置锁定后用户无法登陆,用户连续55次输入错误密码则自动锁定.解锁后恢复用户登陆权限.</p>
                    <p><span class="fwbold">停用/启用:</span>停止或允许用户登陆.</p>
                </div>
            </div>
        </wrapper-content>

        <!--修改-->
        <Modal
                v-model="form_modal"
                width="700  "
                class="form-modal change_agency_msg">
            <p slot="header" style="text-align:center;">
                <span>修改会员账号</span>
            </p>
            <Form :model="formValidate" label-position="right" :label-width="80">
                <FormItem label="登录账号" prop="id"  >
                    <Input v-model="formValidate.id" disabled></Input>
                </FormItem>
                <FormItem label="推荐码" prop="referral_code">
                    <span v-html="form_modal.referral_code"></span>
                </FormItem>
                <FormItem label="电话" prop="pwd1">
                    <Input v-model="formValidate.pwd2"></Input>
                </FormItem>
                <FormItem label="支付密码" prop="pwd2">
                    <Input v-model="formValidate.pwd2"></Input>
                    <span class="c999 tip">不修改请勿输入</span>
                </FormItem>
                <FormItem label="真实姓名" prop="usable_money">
                    <Input v-model="formValidate.usable_money"></Input>
                    <span class="c999 tip">输入范围 1 至 12 位字符</span>
                </FormItem>
                <FormItem label="登录密码" prop="min">
                    <Input v-model="formValidate.min"></Input>
                    <span class="c999 tip">不修改密码则不用输入</span>
                </FormItem>
                <FormItem label="确认密码" prop="max">
                    <Input v-model="formValidate.max"></Input>
                </FormItem>
                <FormItem label="账户余额" prop="max_open_interest">
                    <Input v-model="formValidate.max_open_interest"></Input>
                    <span class="c999 tip">代理余额</span>
                </FormItem>
                <FormItem label="当前保证金" prop="idcard">
                    <Input v-model="formValidate.idcard"></Input>
                    <span class="c999 tip">当保证金达到保证金池额度值时，提现不收保证金</span>
                </FormItem>
                <FormItem label="保证金池" prop="tel">
                    <Input v-model="formValidate.tel"></Input>
                </FormItem>
                <FormItem label="提现保证金比例" prop="qq">
                    <Input v-model="formValidate.qq"></Input>%
                    <span class="c999 tip">代理提现金额的 百分比进入保证金，</span>
                </FormItem>
                <FormItem label="交易佣金及利息分成" prop="qq">
                    <Input v-model="formValidate.qq"></Input>%
                    <span class="c999 tip">≦99%</span>
                </FormItem>
                <FormItem label="限制会员数" prop="qq">
                    <Input v-model="formValidate.qq"></Input>
                    <span class="c999 tip">5000 至 99999</span>
                </FormItem>
                <FormItem label="最小手数" prop="qq">
                    <Input v-model="formValidate.qq"></Input>
                    <span class="c999 tip">不能少于:1</span>
                </FormItem>
                <FormItem label="最大手数" prop="qq">
                    <Input v-model="formValidate.qq"></Input>
                    <span class="c999 tip"> 1 至 10000</span>
                </FormItem>
                <FormItem label="推广电话" prop="qq">
                    <Input v-model="formValidate.qq"></Input>
                </FormItem>
                <FormItem label="推广QQ" prop="qq">
                    <Input v-model="formValidate.qq"></Input>
                </FormItem>
                <FormItem label="推广链接" prop="qq">
                    <Input v-model="formValidate.qq"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="form_modal = false">取消</Button>
                <Button type="info" :loading="send_loading" @click="changeConfirm">修改</Button>
            </div>
        </Modal>

        <transition name="router-slid">
            <router-view></router-view>
        </transition>

    </div>
</template>
<style>
    .user_agency .ivu-table-cell{
        padding: 0 1px;
    }
    .change_agency_msg .ivu-form-item{
        margin-bottom: 0;
    }
    .change_agency_msg .tip i{
        font-style: normal;
    }
    .change_agency_msg .tip{
        display: inline-block;
        line-height: 16px;
    }
    .change_agency_msg .ivu-modal-footer{
        padding: 10px 0 ;
        text-align: center;
    }
    .change_agency_msg .ivu-modal-content{
        padding:  0 20px;
    }
    .change_agency_msg .ivu-input-wrapper{
        width: 50%;
    }
</style>
<script>
    import WrapperContent from '../../../components/wrapper-content.vue'
    import {getUserList, getUser, getLevelList, getPositionList,doUserInfo,delUser,changeUserState} from "@/api/user";
    import * as utils from '../../../assets/js/utils'
    import $ from 'jquery'
    import _ from 'lodash'

    export default {
        components: {
            WrapperContent,
        },
        data() {
            return {
                agentList:[],
                agent:'',
                orderList1:[],
                order1:'',
                orderList2:[],
                order2:'',

                self: this,
                form_modal: false,
                form_action: 'add',
                form_title: '添加新代理',
                form_url: 'add',
                form_submit: '添加',
                formValidate: {
                    referral_code:'jasdgfajsdgjsdg',
                    agency:'',
                    id:'',
                    nickname:'',
                    pwd1:'',
                    pwd2:'',
                    usable_money:'',
                    min:0,
                    max:1000,
                    max_open_interest:0,
                    idcard:'',
                    tel:'',
                    qq:'',
                    /*  user_id: 0,
                      account: '',
                      realname: '',
                      password: '',
                      password_confirm: '',
                      level_id: 0,
                      position_id: 0,
                      state: 1,*/
                },
                ruleValidate: {
                    account: [
                        {required: true, message: '用户编号不能为空', trigger: 'blur'}
                    ],
                    realname: [
                        {required: true, message: '用户昵称不能为空', trigger: 'blur'}
                    ]
                },
                level_list: [],
                position_list: [],
                select_users: [],
                send_loading: false,
                page_size: 10,
                page_num: 1,
                keyword: '',
                loading: true,
                columns: [
                    {
                        title: 'ID',
                        key: 'account',
                        width:60,
                    },
                    {
                        title: '账号',
                        key: 'realname',
                        width:100,
                    },
                    {
                        title: '推荐码',
                        key: 'realname',
                    },
                    {
                        title: '名称',
                        key: 'realname',
                        width:100,
                    },
                    {
                        title: '注册日期',
                        key: 'last_login_time',
                    },
                    {
                        title: '上次登录',
                        key: 'last_login_time',
                    },
                    {
                        title: '会员/最大会员',
                        key: 'login_ip',
                    },
                    {
                        title: '佣金',
                        key: 'realname',
                        width:100,
                    },
                    {
                        title: '保证金',
                        key: 'last_login_time',
                        width:100,
                    },
                    {
                        title: '保证金池',
                        key: 'realname',
                        width:100,
                    },
                    {
                        title: '保证金比例',
                        key: 'last_login_time',
                        width:100,
                    },
                    {
                        title: '账户余额',
                        key: 'realname',
                        width:100,
                    },
                    {
                        title: '状态',
                        key: 'realname',
                        width:60,
                    },
                    {
                        title: '上级代理',
                        key: 'realname',
                        width:100,
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '3px'
                                    },
                                    on: {
                                        click: () => {
                                            this.toLock(params.row.id);
                                        }
                                    }
                                }, '锁定'),
                                h('Button', {
                                    props: {
                                        type: '',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '3px'
                                    },
                                    on: {
                                        click: () => {
                                            this.toStop(params.row.id);
                                        }
                                    }
                                }, '停用'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '3px'
                                    },
                                    on: {
                                        click: () => {
                                            this.toChange(params.row.id);
                                        }
                                    }
                                }, '修改'),
                            ]);
                        }
                    }
                ],
                user_list: [{}],
                userCount: 0,
            }
        },
        watch: {
            /*  form_action: function (value) {
                  if (value == 'add') {
                      this.form_title = '添加新用户';
                      this.form_submit = '添加';
                      this.form_url = 'add'
                  } else {
                      this.form_title = '编辑用户';
                      this.form_submit = '保存';
                      this.form_url = 'edit'
                  }
              },
              form_modal: function (value) {
                  if (value === false) {
                      this.formValidate = {
                          user_id: 0,
                          account: '',
                          realname: '',
                          password: '',
                          password_confirm: '',
                          state: 1,
                      }
                  }
              },
              keyword: function (newQuestion) {
                  this.search()
              },
              '$route'(to, from) { // 路由监听，重新获取数据
                  if (this.$store.state.list_reload) {
                      this.getUserList()
                  }
              }*/
        },
        created: function () {
            this.getUserList();
            this.getLevelList();
            this.getPositionList()
        },
        methods: {
            getUserList() {
                let app = this;
                getUserList(this.page_size, this.page_num, this.keyword).then(res => {
                    app.loading = false;
                    app.user_list = res.data.list;
                    app.userCount = Number(res.data.count)
                });
            },
            getInfo() {
                let app = this;
                getUser(app.formValidate.user_id).then(res => {
                    if (res.data) {
                        app.formValidate.user_id = res.data.id;
                        app.formValidate.account = res.data.account;
                        app.formValidate.realname = res.data.realname;
                        app.formValidate.level_id = res.data.level_id;
                        app.formValidate.position_id = res.data.position_id;
                        app.formValidate.state = res.data.state
                    }
                });
            },
            getLevelList() {
                let app = this;
                getLevelList(50).then(res => {
                    app.level_list = res.data.list
                });
            },
            getPositionList() {
                let app = this;
                getPositionList(50).then(res => {
                    app.position_list = res.data.list
                });
            },
            editItem(id) {
                this.formValidate.user_id = id;
                this.getInfo();
                this.form_modal = true;
                this.form_action = 'edit'
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.formValidate.password !== this.formValidate.password_confirm) {
                            this.$Message.warning('两次输入的密码不相同');
                            return false
                        }
                        let app = this;
                        this.send_loading = true;
                        doUserInfo(app.form_url,app.formValidate).then(res => {
                            const code = res.ret;
                            const msg = res.msg;
                            if (code !== 200) {
                                app.$Message.warning(msg);
                            } else {
                                app.form_modal = false;
                                app.$Message.success('操作成功');
                                app.getUserList()
                            }
                            app.send_loading = false;
                        });
                    }
                })
            },
            search: _.debounce(
                function () {
                    this.page_num = 1;
                    this.getUserList()
                },
                // 这是我们为用户停止输入等待的毫秒数
                500
            ),
            selectItem(selection) {
                let app = this;
                app.select_users = [];
                $.each(selection, function (k, v) {
                    app.select_users.push(v.id)
                });
            },
            changePage(page) {
                this.page_num = page;
                this.getUserList()
            },
            changePageSize(page_size) {
                this.page_num = 1;
                this.page_size = page_size;
                this.getUserList()
            },
            reloadList() {
                this.getUserList(1, this.page_size)
            },
            rowClassName(row, index) {
                return 'rowClassName';
            },
            changeState(id, state, index) {
                let app = this;
                const change_state = state == 1 ? 0 : 1;
                changeUserState(id,state == 1 ? 0 : 1).then(res => {
                    app.user_list[index].state = change_state
                });
            },
            toLock(id){//锁定

            },
            toStop(id){//停用

            },
            toChange(id){//修改
                this.form_title = '修改代理商账号';
                this.form_modal = true ;
                this.form_submit = '保存';
                this.form_url = 'edit'
            },
            changeConfirm(){//确认修改

            },
            addMember(){//添加新会员
                this.form_title = '添加新代理';
                this.form_submit = '添加';
                this.form_url = 'add';
                this.form_modal = true ;
            }
        }
    }
</script>













